<template>
  <div class="innerWrapper">
    <div class="titleWrapper">开发者介绍</div>
    <div class="contentWrapper">
      <h3 class="user-info">
        <el-avatar :size="32">
          <img :src="userAvatar"/>
        </el-avatar>
        <span class="user-name">{{userInfo.username}}</span>
      </h3>
      <ul class="contentDetail">
        <li class="item">联系电话：{{userInfo.phone | phoneFilter }}</li>
        <li class="item">电子邮箱：{{userInfo.email ? userInfo.email : '无'}}</li>
      </ul>
    </div>
    <div style="height: 50px"></div>
    <div class="titleWrapper">公司介绍</div>
    <div class="contentWrapper">
      <h3 style="font-size:18px;padding-left:10px;margin-bottom:5px;">
        江苏徐工信息技术股份有限公司
      </h3>
      <ul class="contentDetail">
        <li class="item">服务时间：9:00 - 18:00</li>
        <li class="item">客服电话：025-52236388</li>
        <li class="item">电子邮箱：xgit@xcmg.com</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      userInfo: state => state.detail.userInfo,
      userAvatar: state => state.detail.userInfo.icon ? require(`../../assets/avatar/${state.detail.userInfo.icon}.png`) : require('../../assets/avatar/23.png')
    })
  },
  filters: {
    phoneFilter: function (input) {
      if (input && typeof input === 'string') {
        const arr = Array.from(input)
        arr.splice(3, 4, '*', '*', '*', '*')
        return arr.join('')
      } else {
        return '无'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.innerWrapper {
  padding: 10px;
  .titleWrapper {
    padding: 15px;
    background: #f2f2f2;
    color: #383838;
    font-weight: bold;
    font-size: 20px;
  }
  .contentWrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .contentDetail {
      list-style-type: none;
      margin: 0;
      padding: 0;
      .item {
        padding: 10px;
        display: flex;
        align-items: center;
        .qqBg {
          width: 25px;
          height: 25px;
          display: inline-block;
          background: no-repeat center url('../../assets/icon_QQ.png');
          background-size: cover;
          cursor: pointer;
        }
      }
    }
    .user-info {
      font-size:18px;
      padding-left:10px;
      margin-bottom:5px;
      display: flex;
      align-items: center;
      .user-name {
        margin-left: 16px;
      }
    }
  }
}
</style>
